<template>
  <div class="mine">
    <header @click="jumplogin">
      <div class="user-info">
        <van-image
          round
          width="60rem"
          height="60rem"
          fit="cover"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <h4 v-if="userToken === ''">登录/注册</h4>
        <h4 v-else>{{ userToken }}</h4>
      </div>
      <div class="myself">个人主页 <van-icon name="arrow" size="12rem" /></div>
    </header>
    <div class="tab">
      <div class="want">
        <div @click="WantWatch">
          <span>{{ wantwatchLength }}</span
          >想看
        </div>
        <van-icon name="arrow" size="12rem" />
      </div>
      <div class="want" @click="$router.push('/successorder')">
        <div><span>{{orderList?.length  || 0}}</span> 看过</div>
        <van-icon name="arrow" size="12rem" />
      </div>
    </div>
    <div class="dingdan">
      <p class="title">我的订单</p>
      <div style="width: 100%; display: flex; justify-content: space-around">
        <div class="icon" @click="$router.push('/orderpage')">
          <van-icon name="coupon-o" size="34rem"/>
          <p>电影票</p>
        </div>
        <div class="icon">
          <van-icon name="bag-o" size="34rem" />
          <p>演出/玩乐</p>
        </div>
        <div class="icon">
          <van-icon name="video-o" size="34rem" />
          <p>在线观影</p>
        </div>
        <div class="icon">
          <van-icon name="hot-o" size="34rem" />
          <p>周边</p>
        </div>
      </div>
    </div>
    <div class="dingdan">
      <div style="width: 100%; display: flex; justify-content: space-around">
        <div class="icon">
          <p class="title">优惠券</p>
          <p><span>1</span>张可用</p>
        </div>
        <div class="icon">
          <p class="title">影城卡</p>
          <p><span>0</span>张可用</p>
        </div>
        <div class="icon">
          <p class="title">猫享卡</p>
          <p>去绑卡</p>
        </div>
        <div class="icon">
          <p class="title">喵币</p>
          <p><span>527</span></p>
        </div>
      </div>
    </div>
    <div class="dingdan out" @click="out">{{ userToken ? '退出登录' : '去登录' }}</div>
  </div>
</template>

<script setup lang='ts'>
import { useRoute, useRouter } from 'vue-router'
const route = useRoute() // 用于获取当前路由对象
const router = useRouter() // 用于执行路由跳转
const $router = useRouter()
const token = localStorage.getItem('token')
const orderList = JSON.parse(localStorage.getItem('OrdersArray'))
const userToken = token ? JSON.parse(token) : ''
const out = () => {
  if (userToken) {
    localStorage.removeItem('token')
    localStorage.removeItem('token2')
    localStorage.removeItem('OrdersArray')

    window.location.reload()
  } else {
    router.push({
      path: '/login',
      query: {
        target: route.fullPath, // 当前页面的路径
      },
    })
  }
}
const jumplogin = () => {
  if (userToken) {
    return
  } else {
    router.push({
      path: '/login',
      query: {
        target: route.fullPath, // 当前页面的路径
      },
    })
  }
}

const WantWatch = () => {
  if (userToken) {
    router.push('/wantwatch')
    return
  } else {
    router.push({
      path: '/login',
      query: {
        target: route.fullPath, // 当前页面的路径
      },
    })
  }
}
import { ref, onMounted } from 'vue'
const wantwatchLength = ref(0) // 用来存储 wantwatch 列表的长度

// 在组件挂载时从 localStorage 获取数据
onMounted(() => {
  const token = JSON.parse(localStorage.getItem('token')) // 获取 token
  const users = JSON.parse(localStorage.getItem('users')) || [] // 获取用户列表

  if (token) {
    const username = token // 假设 token 存储的是用户名
    // 在 users 数组中查找匹配的用户
    const user = users.find((user) => user.username === username)

    if (user && Array.isArray(user.wantwatch)) {
      wantwatchLength.value = user.wantwatch.length // 获取并设置 wantwatch 列表的长度
    } else {
      wantwatchLength.value = 0 // 如果没有找到用户或用户的 wantwatch 不存在，设置为 0
    }
  }
})
</script>

<style lang="less" scoped>
.mine {
  background: linear-gradient(to bottom, #f8d9d6, #fff);
  height: 100vh;
  .out {
    padding: 10rem 0;
    text-align: center;
  }
  header {
    display: flex;
    align-items: center;
    height: 140rem;
    padding: 12rem;
    justify-content: space-between;
    .user-info {
      display: flex;
      align-items: center;
      margin-left: 20rem;
    }
    h4 {
      margin-left: 20rem;
      font-size: 18rem;
      font-weight: 400;
    }

    .myself {
      font-weight: 100;
      color: #5b5b5b;
      background: linear-gradient(to left, #f8d9d6, #fff);
      padding: 8rem;
      border-radius: 20rem;
      font-size: 12rem;
    }
  }

  .tab {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 12rem;
    background-color: #fff;
    height: 60rem;
    width: 90%;
    margin: auto;
    margin-bottom: 12rem;

    .want {
      text-align: left;
      width: 48%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12rem;

      span {
        margin-left: 10rem;
        margin-right: 6rem;
        font-size: 20rem;
      }
    }
  }

  .dingdan {
    border-radius: 12rem;
    background-color: #ffffff;
    width: 90%;
    margin: auto;
    margin-bottom: 12rem;
    padding-bottom: 12rem;

    .title {
      margin: 0;
      padding: 12rem;
      font-size: 14rem;
    }

    .icon {
      width: 20%;
      text-align: center;
      p {
        margin: 0;
        padding: 6rem 0;
        font-size: 12rem;
        color: #292929;
      }
      .title {
        font-size: 13rem;
        font-weight: 600;
        padding: 20rem 0 12rem;
      }
    }
  }
}
</style>